<template>
  <view class="page">


    <view class="form-wrapper">
      <uni-forms
        ref="form"
        :modelValue="formData"
        :rules="rules"
        label-width="180rpx"
      >
        <uni-forms-item label="出发地" name="departure" required>
          <uni-easyinput
            v-model="formData.departureLocation"
            placeholder="请输入出发地"
          />
        </uni-forms-item>

        <uni-forms-item label="目的地" name="destination" required>
          <uni-easyinput
            v-model="formData.destination"
            placeholder="请输入目的地"
          />
        </uni-forms-item>

        <uni-forms-item label="出发时间" name="startTime" required>
          <uni-datetime-picker
            type="datetime"
            v-model="formData.startTime"
            placeholder="请选择出发时间"
          />
        </uni-forms-item>

        <uni-forms-item label="预计返回时间" name="endTime" required>
          <uni-datetime-picker
            type="datetime"
            v-model="formData.endTime"
            placeholder="请选择返回时间"
          />
        </uni-forms-item>

        <uni-forms-item label="用车事由" name="reason" required>
          <uni-easyinput
            type="textarea"
            v-model="formData.reason"
            placeholder="请输入用车事由"
            :maxlength="200"
          />
        </uni-forms-item>

        <uni-forms-item label="乘车人数" name="passengers" required>
          <uni-number-box
            v-model="formData.passengers"
            :min="1"
            :max="99"
          />
        </uni-forms-item>

        <uni-forms-item label="是否需要司机">
          <uni-data-checkbox
            v-model="formData.needDriver"
            :localdata="driverOptions"
          />
        </uni-forms-item>
      </uni-forms>

      <button class="btn-submit" @click="submit">提交申请</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        departureLocation: '',
        destination: '',
        startTime: '',
        endTime: '',
        purpose: '',
        passengers: 1,
        needDriver: 1
      },
      driverOptions: [
        { text: '是', value: 1 },
        { text: '否', value: 0 }
      ],
      rules: {
        departureLocation: { rules: [{ required: true, errorMessage: '请输入出发地' }] },
        destination: { rules: [{ required: true, errorMessage: '请输入目的地' }] },
        startTime: { rules: [{ required: true, errorMessage: '请选择出发时间' }] },
        endTime: { rules: [{ required: true, errorMessage: '请选择返回时间' }] },
        purpose: { rules: [{ required: true, errorMessage: '请输入用车事由' }] },
        passengers: { rules: [{ required: true, errorMessage: '请输入乘车人数' }] }
      }
    };
  },
  methods: {
    back() {
      uni.navigateBack();
    },

	async submit() {
		 
		try{
	    // 先校验
	    await this.$refs.form.validate();
		
	    // 校验通过后发请求
	    const res = await uni.$http.post('/sys/applications/add', this.formData);
	
	    // 按你的业务码判断
	    if (res.data.code === 20000) {
	      uni.showToast({
	        title: res.data.message,
	        mask: true
	      });
	      uni.switchTab({ url: "/pages/application/application"})
	    }
	  } catch (e) {
	    // 表单校验失败会进这里
	    console.error(e);
	  }
	}
  }
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f5;
}

.form-wrapper {
  padding: 30rpx;
}

.btn-submit {
  margin-top: 40rpx;
  width: 100%;
  background-color: #1e90ff;
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 32rpx;
  line-height: 90rpx;
}
</style>